<!-- @format -->

<template>
    <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners" class="menuSub">
        <span slot="title">
           <!-- <a-icon :type="menuInfo.icon" style="margin-right: 10px;"/>--><span>{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children.length > 0" :key="item.key">
            <span>{{item.title}}</span>
          </a-menu-item>
          <sub-menu v-else :menu-info="item" :key="item.key"/>
        </template>
    </a-sub-menu>
</template>

<script>
import { Menu } from 'ant-design-vue'
export default {
    name: 'SubMenu',
    isSubMenu: true,
    props: {
        ...Menu.SubMenu.props,
      menuInfo: {
            type: Object,
            default: () => []
        }
    },
    created() {}
}
</script>
<style lang="less" scoped>
.menuSub {
    margin-top: -10px;
}
</style>
